<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="部门名称">
        <!-- 这里面的属性必须都是 form对象里的书写，不能写form之外的书写 -->
        <!-- <el-input v-model="name" /> -->
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="部门编码">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
          <!-- <el-option label="区域一" value="shanghai" />
          <el-option label="区域二" value="beijing" /> -->
          <el-option v-for="item in employees" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍">
        <el-input v-model="form.introduce" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">立即创建</el-button>
        <!-- dialogVisible = false 不能这样写，dialogVisible 这个值是父组件的值， 应该是通知父组件 -->
        <el-button @click="cancel()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import { getUserSimpleRequest } from '@/api/employees'
import { getEmployeesSimple, getTheDepartmentRequest } from '@/api/employees'
import { addDepartmentRequest } from '@/api/department'
import { getDepartmentDetail } from '@/api/department'

export default {
  name: '',
  props: {
    // id: {
    //   type: String,
    //   required: true
    // },
    isEdit: {
      type: Boolean,
      require: true
    },
    currentPid: {
      type: String,
      required: true
    }
  },
  data() {
    return {

      // form对象里面有哪些属性，由后端决定
      // 去后端看接口文档，看别人的接口需要什么参数，我们在来写form的属性名称
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      // userList: [],
      employees: []
    }
  },
  created() {
    // 这个里面代码不要写太多，只调用其他的函数即可
    // this.getUserSimple()
    this.loadEmployee()
    if (this.isEdit) {
      this.getTheDepartment()
    }
    // this.loadDetail()
  },
  methods: {
    // async getUserSimple() {
    //   try {
    //     const res = await getUserSimpleRequest()
    //     this.userList = res.data
    //     console.log(res)
    //   } catch (err) {
    //     console.log('获取用户基本列表失败', err)
    //   },
    async loadEmployee() {
      try {
        const res = await getEmployeesSimple()
        this.employees = res.data
      } catch (err) {
        console.log('获取用户基本列表失败', err)
      }
    },
    // 执行具体的添加动作
    async doAdd() {
      // 去获取pid： 当前要添加的部门所在的父级的id
      // 从props中获取
      // 1. 组装参数
      const params = { ...this.form, pid: this.currentPid }
      // 2. 调用接口
      // console.log(params)
      await addDepartmentRequest(params)
      // 3. 通知父组件：关闭弹层，再次更新数据
      this.$emit('success')
    },
    async loadDetail() {
      if (this.isEdit) {
        // alert('现在是编辑，要去获取详情')
        const res = await getDepartmentDetail(this.id)
        console.log('现在是编辑，要去获取详情', res)
        this.form = res.data
      }
    },
    onSubmit() {
      // todo: 表单校验
      this.doAdd()
    },
    cancel() {
      this.$emit('MyCloseEvent')
    },
    async getTheDepartment() {
      const { data } = await getTheDepartmentRequest(this.currentPid)
      this.form = data
    }
  },
  onSubmit() {
    console.log(this.form)
  }

}

</script>
